<template>
    <a-drawer
            :width="500"
            :title="title"
            :visible="visible"
            @close="onClose">
        <div class="drawer-content-box">
            <div class="info">
                <div>计费规则说明：</div>
                <div>1、电站设备开通之后请及时设定计费规则；防止无法充电；</div>
                <div>2、计费规则自拟，定义好不同规则后，系统根据所处时间段自动选择对应规则进行收费；</div>
            </div>
            <a-form-model :model="rulesEntity" :rules="rules" ref="rulesEntity" layout="vertical">
                <a-form-model-item label="计费模型编号" prop="rulesNumber">
                    <a-input v-model:value="rulesEntity.rulesNumber" placeholder="请输入计费模型编号"/>
                </a-form-model-item>
                <a-form-model-item label="尖电费" prop="tipCost">
                    <a-input v-model:value="rulesEntity.tipCost" placeholder="请输入尖电费价格"/>
                </a-form-model-item>
                <a-form-model-item label="尖服务费" prop="tipServiceCost">
                    <a-input v-model:value="rulesEntity.tipServiceCost" placeholder="请输入尖服务费价格"/>
                </a-form-model-item>
                <a-form-model-item label="峰电费" prop="peakCost">
                    <a-input v-model:value="rulesEntity.peakCost" placeholder="请输入峰电费价格"/>
                </a-form-model-item>
                <a-form-model-item label="峰服务费" prop="peakServiceCost">
                    <a-input v-model:value="rulesEntity.peakServiceCost" placeholder="请输入峰服务费价格"/>
                </a-form-model-item>
                <a-form-model-item label="平电费" prop="flatCost">
                    <a-input v-model:value="rulesEntity.flatCost" placeholder="请输入平电费价格"/>
                </a-form-model-item>
                <a-form-model-item label="平服务费" prop="flatServiceCost">
                    <a-input v-model:value="rulesEntity.flatServiceCost" placeholder="请输入平服务费价格"/>
                </a-form-model-item>
                <a-form-model-item label="谷电费" prop="valleyCost">
                    <a-input v-model:value="rulesEntity.valleyCost" placeholder="请输入谷电费价格"/>
                </a-form-model-item>
                <a-form-model-item label="谷服务费" prop="valleyServiceCost">
                    <a-input v-model:value="rulesEntity.valleyServiceCost" placeholder="请输入谷服务费价格"/>
                </a-form-model-item>
                <a-form-model-item label="所属电站" prop="stationId">
                    <a-select placeholder="所属电站" v-model:value="rulesEntity.stationId" @change="loadPile">
                        <a-select-option :value="station.id" v-for="station in stationEntities">
                            {{ station.stationName }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
                <a-form-model-item label="所属充电桩" prop="pileNumber">
                    <a-select placeholder="所属充电桩" v-model:value="rulesEntity.pileNumber">
                        <a-select-option :value="pile.pileNumber" v-for="pile in pileEntities">{{ pile.pileName }}
                        </a-select-option>
                    </a-select>
                </a-form-model-item>
            </a-form-model>
        </div>
        <div class="drawer-footer-box">
            <a-button type="primary" @click="saveRules('rulesEntity')">保存</a-button>
        </div>
    </a-drawer>
</template>

<script>
    import {api, post} from "@/api/api";

    export default {
        name: "AddRules",
        props: {
            title: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                id: '',
                visible: false,
                rulesEntity: {},
                rules: {
                    rulesNumber: [
                        {required: true, message: "请填写计费模型编号", trigger: "blur",},
                    ],
                    tipCost: [
                        {required: true, message: "请填写尖电费", trigger: "blur",},
                    ],
                    tipServiceCost: [
                        {required: true, message: "请填写尖服务费", trigger: ["blur", "change"],},
                    ],
                    peakCost: [
                        {required: true, message: "请填写峰电费", trigger: "blur",},
                    ],
                    peakServiceCost: [
                        {required: true, message: "请填写峰服务费", trigger: ["blur", "change"],},
                    ],
                    flatCost: [
                        {required: true, message: "请填写平电费", trigger: "blur",},
                    ],
                    flatServiceCost: [
                        {required: true, message: "请填写平服务费", trigger: ["blur", "change"],},
                    ],
                    valleyCost: [
                        {required: true, message: "请填写谷电费", trigger: "blur",},
                    ],
                    valleyServiceCost: [
                        {required: true, message: "请填写谷服务费", trigger: ["blur", "change"],},
                    ],
                    stationId: [
                        {required: true, message: "请选择所属电站", trigger: ["blur", "change"],},
                    ],
                    pileNumber: [
                        {required: true, message: "请选择所属充电桩", trigger: ["blur", "change"],},
                    ]
                },
                stationEntities: [],
                pileEntities: [],
            }
        },
        methods: {
            show(id) {
                if (id) {
                    this.id = id
                    // 编辑
                    post(api.RulesSingle, {id: id}).then(res => {
                        this.rulesEntity = res.data.data
                    })
                }
                this.visible = true
                post(api.GetStationList, {}).then(res => {
                    this.stationEntities = res.data.data
                })
            },
            loadPile(stationId) {
                post(api.GetPileList, {stationId: stationId}).then(res => {
                    this.pileEntities = res.data.data
                })
            },
            // 保存电站信息
            saveRules() {
                this.$refs.rulesEntity.validate((valid) => {
                    if (valid) {
                        let rulesNumber = this.rulesEntity.rulesNumber
                        if (rulesNumber.length != 4) {
                            this.$message.error('计费模型编号必须只能是四位整数！')
                            return
                        }
                        this.rulesEntity.tipCost = new Number(this.rulesEntity.tipCost).toFixed(5)
                        this.rulesEntity.tipServiceCost = new Number(this.rulesEntity.tipServiceCost).toFixed(5)
                        this.rulesEntity.peakCost = new Number(this.rulesEntity.peakCost).toFixed(5)
                        this.rulesEntity.peakServiceCost = new Number(this.rulesEntity.peakServiceCost).toFixed(5)
                        this.rulesEntity.flatCost = new Number(this.rulesEntity.flatCost).toFixed(5)
                        this.rulesEntity.flatServiceCost = new Number(this.rulesEntity.flatServiceCost).toFixed(5)
                        this.rulesEntity.valleyCost = new Number(this.rulesEntity.valleyCost).toFixed(5)
                        this.rulesEntity.valleyServiceCost = new Number(this.rulesEntity.valleyServiceCost).toFixed(5)
                        let requestApi = this.id ? api.UpdateRules : api.SaveRules;
                        post(requestApi, this.rulesEntity).then((res) => {
                            if (res.data.code == "000000") {
                                this.$message.success({
                                    content: `${this.id ? "修改" : "添加"}计费规则成功`,
                                });
                                this.onClose()
                                this.$emit('reloadList')
                            } else {
                                this.$message.error({
                                    content: res.data.message,
                                });
                            }
                        }).catch((err) => {
                            console.log(err);
                        });
                    } else {
                        return this.$message.warning({
                            content: "请填写完整信息",
                        });
                    }
                });
            },
            onClose() {
                this.$refs.rulesEntity.resetFields();
                this.id = ''
                this.visible = false
            },
        },
    }
</script>

<style lang="less" scoped>
    @import '../../../static/addRules';
</style>
